<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script type="text/javascript" src="../../js/vue.js"></script>
<body>
  <script type="text/javascript">
    let obj1 = {a:200};
    let obj2 = {b:200};
    //数据代理  通过操作obj2，来修改obj1
    Object.defineProperty(obj2,'a',{
      get() {
        return obj1.a;
      },
      set(v) {
        obj1.a = v;
      }
    })



    const vm = new Vue({
      el:'#root',
      data:{}
    }
    )
    /*vue中的数据代理
    * 通过vm对象来代理data对象中属性的操作（读/写）
    * 通过Object.defineProperty把data中的属性添加到vm对象中，
    * 为添加上去的每一个属性都指定get和set方法，在get和set方法内部再去操作data中的属性
    *
    *
    * */
  </script>
</body>
</html>
